<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../js/vue.js"></script>
		<style>
			.dialog_window {
				position: absolute;
				top: 100px;
				left: 100px;
				width: 300px;
				height: 200px;
				background-color: #fdb692;
				font-size: 24px;
				line-height: 30px;
			}

			.close_button {
				position: absolute;
				bottom: 0px;
				right: 0px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<h4>单击打开对话框按钮时，让对话框显示</h4>
			<button @click="onClickOpenDialog">打开对话框</button>
			<div class="dialog_window" v-show="isShow">
				<button class="close_button" @click="onClickCloseDialog">关闭对话框</button>
				<div>
					这里有很多对话框显示的内容，比如产品介绍 文本说明
					...
				</div>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						isShow: false,
					}
				},
				methods: {
					onClickOpenDialog() {
						this.isShow = true;
					},
					onClickCloseDialog() {
						this.isShow = false;
					}
				}
			}).mount("#app");
		</script>
	</body>

</html>